<template>
  <view class="scan-container">
    <u-image class="bg-image" src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?q=80&w=2070&auto=format&fit=crop" mode="aspectFill"></u-image>
    
    <view class="scan-content-wrapper">
      <view class="scan-header">
        <u-avatar size="150" src="/static/logo.png" mode="aspectFit" class="scan-logo"></u-avatar>
        <view class="scan-title">微餐饮中心</view>
        <u-line-progress :percent="100" height="4" activeColor="#fa436a" class="scan-progress"></u-line-progress>
        <view class="scan-subtitle">
          <u-icon name="scan" size="24" color="#fa436a" class="icon-margin"></u-icon>
          扫描餐桌二维码开始点餐
        </view>
      </view>
      
      <view class="scan-options">
        <u-grid :border="false" col="2">
          <u-grid-item>
            <view class="grid-item-box" @click="scanCode">
              <u-icon name="scan" size="46" color="#fa436a"></u-icon>
              <text class="grid-text">扫码点餐</text>
            </view>
          </u-grid-item>
          <u-grid-item>
            <view class="grid-item-box" @click="inputTableId">
              <u-icon name="keyboard-9" size="46" color="#3c9cff"></u-icon>
              <text class="grid-text">输入桌号</text>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
      
      <view class="scan-tips">
        <u-notice-bar
          :text="noticeText"
          mode="horizontal"
          :duration="8"
          bgColor="rgba(255, 255, 255, 0.6)"
          color="#fa436a"
          :moreIcon="false"
        ></u-notice-bar>
      </view>
    </view>
    
    <!-- 餐厅展示图 -->
    <u-swiper
      :list="foodImages"
      :autoplay="true"
      :interval="3000"
      :circular="true"
      radius="10"
      bgColor="#f3f4f6"
      class="food-swiper"
    ></u-swiper>
    
    <!-- 返回按钮 -->
    <view class="back-button">
      <u-button icon="arrow-left" shape="circle" size="mini" @click="goBack" plain></u-button>
    </view>
    
    <!-- 手动输入桌号弹窗 -->
    <u-popup v-model="showPopup" mode="center" borderRadius="16" width="600rpx" height="auto">
      <view class="popup-content">
        <view class="popup-title">
          <u-icon name="table" size="28" color="#fa436a" class="icon-margin"></u-icon>
          请输入桌号
        </view>
        <u-input 
          v-model="tableId" 
          placeholder="请输入桌号" 
          border="bottom" 
          clearable
          prefixIcon="pushpin-fill"
          prefixIconStyle="color: #fa436a"
        ></u-input>
        <view class="popup-btns">
          <u-button @click="showPopup = false" size="medium" icon="close" plain>取消</u-button>
          <u-button @click="confirmTableId" size="medium" type="primary" icon="checkmark">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import * as uniApi from '@/common/utils/uni-api.js'
import cartStore from '@/common/store/cart.js'

// 数据
const showPopup = ref(false)
const tableId = ref('')
const shopId = ref('1') // 默认店铺ID
const foodImages = ref([
  'https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=2070&auto=format&fit=crop',
  'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?q=80&w=2081&auto=format&fit=crop',
  'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2080&auto=format&fit=crop',
  'https://images.unsplash.com/photo-1565958011703-44f9829ba187?q=80&w=1965&auto=format&fit=crop'
])

// 滚动通知文本
const noticeText = computed(() => {
  return '扫描餐桌上的二维码，即可开始点餐 | 美食随心，美味随行 | 欢迎使用微餐饮点餐系统'
})

// 事件处理
const scanCode = async () => {
  try {
    const res = await uniApi.scanCode()
    
    try {
      // 假设二维码内容格式为: {tableId: '101', shopId: '1'}
      const data = JSON.parse(res.result)
      if (data && data.tableId) {
        getTableInfo(data.tableId, data.shopId)
      } else {
        uniApi.showToast('无效的二维码')
      }
    } catch (e) {
      // 可能是直接就是tableId
      if (res.result) {
        getTableInfo(res.result)
      } else {
        uniApi.showToast('无效的二维码')
      }
    }
  } catch (err) {
    console.error('扫码失败', err)
    uniApi.showToast('扫码失败')
  }
}

// 手动输入桌号
const inputTableId = () => {
  showPopup.value = true
}

// 确认桌号
const confirmTableId = () => {
  if (!tableId.value) {
    uniApi.showToast('请输入桌号')
    return
  }
  
  showPopup.value = false
  getTableInfo(tableId.value)
}

// 获取桌位信息
const getTableInfo = async (id, sId = shopId.value) => {
  uniApi.showLoading('加载中...')
  
  try {
    // 这里需要根据实际情况修改API调用
    const res = await api.tableApi.getTableInfo(id)
    
    if (res.code === 0 && res.data) {
      // 初始化购物车
      cartStore.initCart(id, sId || res.data.shopInfo.id)
      
      // 保存桌位信息到本地存储
      uniApi.setStorage('tableInfo', res.data)
      
      // 跳转到菜单页
      await uniApi.switchTab('/pages/menu/menu')
    } else {
      uniApi.showToast(res.msg || '获取桌位信息失败')
    }
  } catch (e) {
    console.error('获取桌位信息失败', e)
    uniApi.showToast('获取桌位信息失败')
  } finally {
    uniApi.hideLoading()
  }
}

// 返回首页
const goBack = async () => {
  try {
    await uniApi.navigateTo('/pages/index/index')
  } catch (error) {
    console.error('返回失败:', error)
  }
}

// 检查URL参数
onMounted(() => {
  const query = uni.$route?.query || {}
  if (query.tableId) {
    getTableInfo(query.tableId)
  }
})
</script>

<style lang="scss" scoped>
.scan-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #f8f8f8;
  padding: 40rpx 0;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.25;
}

.scan-content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx;
  flex: 1;
}

.scan-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
  width: 80%;
}

.scan-logo {
  margin-bottom: 30rpx;
  border: 6rpx solid #fff;
  box-shadow: 0 10rpx 20rpx rgba(250, 67, 106, 0.2);
  animation: pulseShadow 3s infinite;
}

@keyframes pulseShadow {
  0% {
    box-shadow: 0 10rpx 20rpx rgba(250, 67, 106, 0.2);
  }
  50% {
    box-shadow: 0 10rpx 30rpx rgba(250, 67, 106, 0.4);
  }
  100% {
    box-shadow: 0 10rpx 20rpx rgba(250, 67, 106, 0.2);
  }
}

.scan-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  text-align: center;
}

.scan-progress {
  width: 100%;
  margin-bottom: 20rpx;
}

.scan-subtitle {
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
}

.icon-margin {
  margin-right: 10rpx;
}

.scan-options {
  width: 100%;
  margin: 60rpx 0;
}

.grid-item-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.grid-item-box:active {
  transform: scale(0.96);
  opacity: 0.9;
}

.grid-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.scan-tips {
  width: 90%;
  margin-top: 20rpx;
}

.food-swiper {
  width: 90%;
  height: 300rpx;
  margin-bottom: 40rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}

.back-button {
  position: absolute;
  top: 80rpx;
  left: 40rpx;
  z-index: 10;
}

.popup-content {
  padding: 40rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.popup-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}
</style> 